import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function Echar_shan() {

    const chartRef = useRef(null);

    useEffect(() => {
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartRef.current);

        // 设置图表的配置项
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 40.4, name: '水分' },
                        { value: 14.4, name: '蛋白质' },
                        { value: 15.6, name: '脂肪量' },
                        { value: 2.7, name: '骨量' },
                    ]
                }
            ]
        };

        // 将配置项应用到图表
        myChart.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            myChart.dispose();
        };
    }, []);

    return (
        <div style={{ width: '100%' }} >
            <div
                ref={chartRef}
                style={{ minHeight: '6rem' }}></div>
        </div>
    );
}

export default Echar_shan;